<template>
  <div class="search-view">
    <div class="reminder">
      你正在预览{{ queryData.city }}的天气信息<span v-if="counterStore.isShow_1">，可以通过右上角的“+”号按钮保存起来</span>
    </div>
    <div class="weatherShow" v-if="counterStore.adcodeWeather.length>localStoreLength">
      <h1>当日温度是：{{ counterStore.lastadcodeWeather[0][0].daytemp }}℃</h1>
      <h1>当日天气是：{{ counterStore.lastadcodeWeather[0][0].dayweather }}</h1>
      <h1>当日风向是：{{ counterStore.lastadcodeWeather[0][0].daywind }}</h1>
      <h1>当日风力是：{{ counterStore.lastadcodeWeather[0][0].daypower }}级</h1>
    </div>
    <hr />
    <div class="weatherChart" v-if="counterStore.adcodeWeather.length>localStoreLength">
      <div class="table">
        <div>
          <span>今天</span>
          <span>{{ counterStore.lastadcodeWeather[0][0].date.slice(5, 10) }}</span>
          <span>{{ counterStore.lastadcodeWeather[0][0].dayweather }}</span>
          <span>风力 {{ counterStore.lastadcodeWeather[0][0].daypower }}级</span>
        </div>
        <div>
          <span>明天</span>
          <span>{{ counterStore.lastadcodeWeather[0][1].date.slice(5, 10) }}</span>
          <span>{{ counterStore.lastadcodeWeather[0][1].dayweather }}</span>
          <span>风力 {{ counterStore.lastadcodeWeather[0][1].daypower }}级</span>
        </div>
        <div>
          <span>周{{ week[+counterStore.lastadcodeWeather[0][2].week - 1] }}</span>
          <span>{{ counterStore.lastadcodeWeather[0][2].date.slice(5, 10) }}</span>
          <span>{{ counterStore.lastadcodeWeather[0][2].dayweather }}</span>
          <span>风力 {{ counterStore.lastadcodeWeather[0][2].daypower }}级</span>
        </div>
        <div>
          <span>周{{ week[+counterStore.lastadcodeWeather[0][3].week - 1] }}</span>
          <span>{{ counterStore.lastadcodeWeather[0][3].date.slice(5, 10) }}</span>
          <span>{{ counterStore.lastadcodeWeather[0][3].dayweather }}</span>
          <span>风力 {{ counterStore.lastadcodeWeather[0][3].daypower }}级</span>
        </div>
      </div>
      <div class="lineChart">
        <v-chart :option="lineOption"></v-chart>
      </div>
    </div>
  </div>
</template>

<script setup>
// 通过路由传过来的city 和 adcode 获取天气信息
// 当日信息渲染到weatherShow中
// 近4日的天气信息渲染到weatherChart中
import { onMounted, ref,watch } from 'vue'
import { useRoute } from 'vue-router'
import { useCounterStore } from '@/stores/counter'

const locastoreCity = ref({})
const week = ['一', '二', '三', '四', '五', '六', '日']
let localStoreLength = ref(0)
const counterStore = useCounterStore()
const lineOption = ref({})
let queryData = ref('')
// 绘制折线图
const renderLineChart = (data1, data2) => {
  console.log(data1,data2,'开始渲染');
  lineOption.value = {
    xAxis: {
      type: 'category',
      show: false
    },
    yAxis: {
      type: 'value',
      show: false
    },
    grid: {
      top: 20,
      left: 0,
      right: 0,
      bottom: 0
    },
    series: [
      {
        data: data1,
        type: 'line',
        smooth: true,
        label: {
          show: true,
          position: 'top',
          formatter: '白{c}°C',
          color: '#fff'
        }
      },
      {
        data: data2,
        type: 'line',
        smooth: true,
        label: {
          show: true,
          position: 'top',
          color: '#fff',
          formatter: '晚{c}°C'
        }
      }
    ],
  }
  console.log(lineOption.value,'折线图配置');
}
onMounted(() => {
  // 拿到adcode 
  queryData.value = useRoute().query
  // 传递当前城市和adcode，因为要在 topHeader中的 + 号点击事件中调用当前search的city和adcode，所以需要传递给counterStore
  counterStore.transmitCurCity(queryData.value.city,queryData.value.adcode)
  // 获取天气数据
  counterStore.getWeatherData(queryData.value.adcode)
  // 判断是否保存过该城市
  counterStore.isSavedCity(queryData.value.adcode)
  // 判断数据是否获取成功，以此为依据渲染视图,挂载时就渲染数据的话会因为数据还没获取到而报错
  // 在加载homeView时，会根据本地存储的城市信息去获取相应天气信息，每获取一个就会向counterStore.adcodeWeather中push一个城市的数据
  // 跳转到searchView时，因为调用了counterStore.getWeatherData()方法，同样向counterStore.adcodeWeather中push了一个城市的数据
  // 所以counterStore.adcodeWeather中的数据长度会大于本地存储的城市数量
  locastoreCity.value = JSON.parse(localStorage.getItem('savedCities'))
  if (!locastoreCity.value) {
    localStoreLength.value = 0
  } else {
    localStoreLength.value = locastoreCity.value.length
    console.log(localStoreLength.value,'本地存储的城市数量');
  }
})
// 当所选城市天气数据获取成功后，渲染图表
watch(counterStore, (newVal) => {
  // 要判断引起conterStore变化的是不是weather，因为onMounted中触发的getWeatherData()也会改变counterStore
  // 不能直接监听，conterStore.weather，只能监听到counterStore
  const { adcodeWeather,lastadcodeWeather } = newVal
  if (adcodeWeather.length>localStoreLength.value) {
    // console.log(lastadcodeWeather,'查看一下数据格式');
    const data1 = lastadcodeWeather[0].map((item) => +item.daytemp)
    const data2 = lastadcodeWeather[0].map((item) => +item.nighttemp)
    renderLineChart(data1, data2)
  }
})

</script>

<style lang="scss" scoped>
.search-view {
  display: flex;
  flex-direction: column;
  color: white;
  .reminder {
    text-align: center;
    background-color: rgb(0 78 113);
    padding: 10px;
    border-radius: 10px;
  }
  .weatherShow {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
    h1 {
      font-size: 17px;
      font-weight: normal;
    }
  }
  hr {
    margin-top: 10px;
    color: white;
    opacity: 0.1;
  }
  .weatherChart {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 400px;
    background-color: rgb(0 78 113);
    margin: 8px 0 0 0;
    padding: 40px 48px 0 48px;
    .table {
      flex: 1;
      display: flex;
      gap: 6px;

      div {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        text-align: center;
        font-size: 18px;
      }
    }
    .lineChart {
      flex: 1;
      width: 100%;
      margin: 8px 0 0 0;
      padding: 40px 28px 0 28px;
    }
  }
}
</style>
